<template>
  <div class="ver-layout">
    ffmpeg
    <img class="output-image" :src="outputImage">
    <el-button type="primary" size="small" @click="mp4ToGif">mp4转gif</el-button>
  </div>
</template>

<script>
// import {createFFmpeg, fetchFile} from '@ffmpeg/ffmpeg';

export default {
  name: "index",
  data() {
    return {
      outputImage: ''
    }
  },
  mounted() {
    // console.log("createFFmpeg", createFFmpeg)
  },
  methods: {
    async mp4ToGif() {
      const ffmpeg = createFFmpeg({
        // corePath: 'https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js',
        // corePath: "/ffmpeg-core.js",
        // corePath: "/public/dist/ffmpeg-core.js",
        // corePath: 'ffmpeg-core.js',
        log: true,
      });
      await ffmpeg.load();
      await ffmpeg.FS('writeFile', 'test.mp4', await fetchFile('../../assets/test.mp4'));

      await ffmpeg.run('-i', 'test.mp4','-y','out.gif')
      const data = ffmpeg.FS('readFile', 'out.gif');
      let gifUrl = URL.createObjectURL(new Blob([data.buffer], { type: 'image/gif' }))
      this.outputImage = gifUrl
    }
  }
}
</script>

<style scoped>
.output-image {
  width: 300px;
}
</style>
